<template>
    <div class="uploadskill">
        <nav-header></nav-header>
        <div class="container">
            <div class="wrapper">
                <div class="left-sidebar">
                    <ul class="navlist">
                        <li>
                            <i></i>
                            <a href="/#/uploadSkill">发布技能</a>
                        </li>
                        <li>
                            <a href="/#/uploadBook">发布书籍</a>
                        </li>
                    </ul>
                </div>
                <div class="article">
                    <form class="post">
                        <div class="title">发布技能</div>
                        <div class="upload-content">
                            <div class="con-title">技能信息</div>
                            <div class="con-content">
                                <div class="content-top">
                                    <i class="redwarn"></i>
                                    <div class="content-input">
                                        <input type="text" placeholder="请输入技能名称">
                                    </div>
                                </div>
                                <div class="skill-type upload-among-space">
                                    <i class="redwarn"></i>
                                    <div class="content-select">
                                        <select name="skilltype" v-model="skilltype">
                                            <option value="运动">运动</option>
                                            <option value="乐器">乐器</option>
                                            <option value="语言">语言</option>
                                            <option value="艺术设计">艺术设计</option>
                                            <option value="计算机">计算机</option>
                                            <option value="其他">其他</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="skill-description upload-among-space">
                                    <i class="redwarn"></i>
                                    <div class="content-input">
                                        <input type="text" placeholder="主要描述所教授技能及个人相关信息">
                                    </div>
                                </div>
                                <div class="skill-school upload-among-space">
                                    <i class="redwarn"></i>
                                    <div class="content-select">
                                        <select name="school" v-model="school">
                                            <option value="中国矿业大学">中国矿业大学</option>
                                            <option value="中国矿业大学（徐海）">中国矿业大学（徐海）</option>
                                            <option value="江苏师范大学">江苏师范大学</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="skill-academy upload-among-space">
                                    <i class="redwarn"></i>
                                    <div class="content-select">
                                        <select name="academy" v-model="academy">
                                            <option value="中国矿业大学">管理学院</option>
                                            <option value="中国矿业大学">外文学院</option>
                                            <option value="中国矿业大学">体育学院</option>
                                            <option value="中国矿业大学">建筑与设计学院</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="upload-content">
                            <div class="con-title">上传图片</div>
                            <div class="con-content">
                                <div class="content-top">
                                    <i class="redwarn"></i>
                                    <div class="image-list">
                                        <el-upload
                                        class="avatar-uploader"
                                        action="https://jsonplaceholder.typicode.com/posts/"
                                        :show-file-list="false"
                                        :on-success="handleAvatarSuccess"
                                        :before-upload="beforeAvatarUpload">
                                            
                                            <img v-if="imageUrl" :src="imageUrl" class="avatar" >
                                            <i v-else class="el-icon-plus avatar-uploader-icon">添加图片</i>
                                        </el-upload>    
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="upload-content">
                            <div class="con-title">交易方式</div>
                            <div class="con-content">
                                <div class="content-top">
                                    <i class="redwarn"></i>
                                    <div class="content-input sell">
                                        <input type="text">
                                        <div class="content-select">
                                            <select name="way">
                                                <option>元 / 次</option>
                                                <option>元 / 天</option>
                                                <option>元 / 周</option>
                                                <option>元 / 月</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="articlefoot">
                            <div class="btn-group">
                                <a href="javascript:;" class="btn btn-large">确认发布</a>
                                <a href="/#/index" class="btn btn-default btn-large">返回首页</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <nav-footer></nav-footer>
    </div>
</template>
<script>
import NavHeader from './../components/NavHeader'
import NavFooter from './../components/NavFooter'
    export default {
        name:'uploadSkill',
        data(){
            return {
                imageUrl: ''
            }
        },
        components:{
            NavHeader,
            NavFooter
        },
        methods: {
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isIMG = ['image/jpeg','image/png'].includes(file.type);
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isIMG) {
                this.$message.error('上传头像图片必须是 JPG或PNG 格式!');
                }
                if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isIMG && isLt2M;
            }
        }
    }
</script>
<style lang="scss">
    .uploadskill{
        font: 14px/1.5 "PingFang SC","Lantinghei SC","Microsoft YaHei","HanHei SC","Helvetica Neue","Open Sans",Arial,"Hiragino Sans GB","微软雅黑",STHeiti,"WenQuanYi Micro Hei",SimSun,sans-serif;
        background: #f6f6f6;
        .wrapper{
            display:flex;
            justify-content: space-between;
            .left-sidebar{
                width: 210px;
                height: 96px;
                background: #ffffff;
                border-radius: 4px;
                .navlist{
                    li{
                        height: 48px;
                        line-height: 48px;
                        padding: 0 20px;
                        font-size: 14px;
                        cursor: pointer;
                        position: relative;
                        display: flex;
                        flex-direction: row;
                        i{
                            display: inline-block;
                            position: absolute;
                            left: 0;
                            top: 10px;
                            width: 3px;
                            height: 32px;
                            background: #2b81bd;
                            vertical-align: middle;
                        }
                        a{
                            color: #333333;
                        }
                        &:hover{
                            background: #2b81bd;
                            border-radius: 4px;
                        }
                    }
                }
            }
            .article{
                width: 900px;
                margin-left: 20px;
                box-sizing: border-box;
                border-radius: 4px;
                .post{
                    .title{
                        border-radius: 4px;
                        width: 100%;
                        line-height: 65px;
                        padding: 0 30px;
                        background: #fff;
                        position: relative;
                        box-sizing: border-box;
                    }
                    .upload-content{
                        margin-top: 10px;
                        background: #ffffff;
                        border-radius: 4px;
                        .con-title{
                            color: #444444;
                            font-size: 14px;
                            height: 52px;
                            line-height: 52px;
                            padding: 0 30px;
                            border-bottom: 1px solid #eeeeee;
                        }
                        .con-content{
                            padding: 30px;
                            .content-top{
                                display: flex;
                                flex-direction: row;
                                .image-list{
                                    display: flex;
                                    justify-content: space-between;
                                    .avatar-uploader .el-upload {
                                        border: 1px dashed #d9d9d9;
                                        border-radius: 6px;
                                        cursor: pointer;
                                        position: relative;
                                        overflow: hidden;
                                    }
                                    .avatar-uploader .el-upload:hover {
                                        border-color: #409EFF;
                                    }
                                    .avatar-uploader-icon {
                                        font-size: 28px;
                                        color: #8c939d;
                                        width: 260px;
                                        height: 180px;
                                        line-height: 178px;
                                        text-align: center;
                                    }
                                    .avatar {
                                        width: 178px;
                                        height: 178px;
                                        display: block;
                                    }
                                }
                                .sell{
                                    display: flex;
                                    flex-direction: row;
                                    margin: 5px;
                                    input{
                                        width: 50px;
                                        height: 30px;
                                        margin: 0 10px;
                                    }
                                    select{
                                        width: 80px;
                                        height: 30px;
                                        padding: 0 5px;
                                    }
                                }
                            }
                            .upload-among-space{
                                margin-top: 30px;
                                display: flex;
                                flex-direction: row;
                            }
                            .content-select{
                                padding-right: 40px;
                                width: 700px;
                                select{
                                    width: 100%;
                                    padding-left: 20px;
                                    padding-right: 20px;
                                    background: #f4f4f4;
                                    box-sizing: border-box;
                                    border-radius: 4px;
                                    border: 1px solid #ccc;
                                    height: 42px;
                                }
                            }
                            .content-input{
                                display: inline-block;
                                vertical-align: middle;
                                vertical-align: auto;
                                display: inline;
                                position: relative;
                                padding-right: 40px;
                                width: 700px;
                                input{
                                    width: 100%;
                                    padding-left: 20px;
                                    padding-right: 20px;
                                    background: #f4f4f4;
                                    box-sizing: border-box;
                                    border-radius: 4px;
                                    border: 1px solid #ccc;
                                    height: 42px;
                                }
                            }
                            .redwarn{
                                width: 4px;
                                height: 4px;
                                background: #f14538;
                                border-radius: 50%;
                                zoom: 1;
                                margin-top: 19px;
                                margin-right: 16px;
                            }
                        }
                    }
                    .articlefoot{
                        margin-bottom: 40px;
                        .btn-group{
                            margin-top: 37px;
                            text-align: right;
                            a{
                                padding: 0!important;
                            }
                        }
                    }
                }
            }
        }
    }
</style>